<template>
  <div class="sidebar">
    <div class="logo">
      <svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M9.5 2c-1.99 0-3.61 1.54-3.75 3.5S4 8.5 4 8.5S2.25 8.5 2.25 11c0 2.25 2.25 2.25 2.25 2.25V15c0 1.66 1.34 3 3 3h1c1.66 0 3-1.34 3-3v-1.5c0 0 1.75 0 1.75-2.25S11.5 9.5 11.5 9.5V8c0-1.66-1.34-3-3-3h-1.5V2.5C7 2.22 6.78 2 6.5 2h-1z" />
        <path d="M15.5 2c1.99 0 3.61 1.54 3.75 3.5S21 8.5 21 8.5s1.75 0 1.75 2.5S21 13.5 21 13.5V15c0 1.66-1.34 3-3 3h-1c-1.66 0-3-1.34-3-3v-1.5c0 0-1.75 0-1.75-2.25s1.75-2.25 1.75-2.25V8c0-1.66 1.34-3 3-3h1.5V2.5c0-.28.22-.5.5-.5h1z" />
      </svg>
      <div class="logo-text">AI智能平台</div>
    </div>
    <div class="menu">
      <router-link to="/" class="menu-item" active-class="active">
        <font-awesome-icon icon="chart-line" />
        仪表盘
      </router-link>

      <div class="menu-category">需求与测试</div>

      <router-link to="/requirements" class="menu-item" active-class="active">
        <font-awesome-icon icon="file-alt" />
        需求优化
      </router-link>
      <router-link to="/test-cases" class="menu-item" active-class="active">
        <font-awesome-icon icon="brain" />
        用例生成
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  mounted() {
    // 处理窗口大小变化的函数
    const handleResize = () => {
      // 这里可以添加具体的窗口大小变化处理逻辑
    };

    // 监听窗口大小变化事件
    window.addEventListener('resize', handleResize);

    // 在组件卸载时移除事件监听，避免内存泄漏
    this.$options.beforeUnmount = () => {
      window.removeEventListener('resize', handleResize);
    };
  }
};
</script>

<style scoped>
.sidebar {
  width: 220px;
  background-color: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #6366f1;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.menu-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #4b5563;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.menu-item.active {
  background-color: #f3f4f6;
  color: #6366f1;
  border-left: 3px solid #6366f1;
}

.menu-item:hover:not(.active) {
  background-color: #f9fafb;
}

.menu-item svg {
  margin-right: 10px;
  font-size: 18px;
  width: 18px;
}

.menu-category {
  padding: 12px 20px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6366f1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 12px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 500;
  color: #111827;
}

.user-role {
  font-size: 12px;
  color: #6b7280;
}
</style>